<template>
  <Modal v-model="isOpen" title="新增服务" width="560px" :loading="loading" @on-ok="ok" @on-cancel="cancel">
    <Form ref="server" :model="server" :label-width="80">
      <FormItem label="级别:" prop="level">
        <RadioGroup v-model="server.level">
          <Radio label="1">
            <span>一级</span>
          </Radio>
          <Radio label="2">
            <span>二级</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="服务名称:" prop="name">
        <Input type="text" v-model="server.name" />
      </FormItem>
      <FormItem label="父级类型:" prop="pid" v-if="server.level==2">
        <Select v-model="server.pid" clearable>
          <Option v-for="parent in parentOpts" :value="parent.id" :key="parent.id" v-text="parent.name"></Option>
        </Select>
      </FormItem>
      <FormItem label="状态:" prop="status">
        <RadioGroup v-model="server.status" v-for="(status,idx) in this.$store.state.statusOptions.commons" :key="idx">
          <Radio :label="status.value"><span v-text="status.text"></span></Radio>
        </RadioGroup>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
  import servertype from '@/models/car/servertype/index'

  export default {
    name: 'add-server-type',
    data () {
      return {
        isOpen: true,
        loading: true,
        server: {
          name: null,
          pid: 0,
          status: null,
          level: null
        },
        parentOpts: [],
        parents: []
      }
    },
    mounted () {
      servertype.getParSerType().then(r => {
        if (r.code === 200) {
          this.parents = r.list
          if (this.parents.length > 0) {
            this.parents.forEach((parent) => {
              this.parentOpts.push({
                id: parent.id,
                name: parent.name
              })
            })
          }
        } else {
          this.$Message.warning({
            content: r.msg,
            duration: 5,
            closable: true
          })
        }
      }).catch(r => {
        console.log(r)
      })
    },
    methods: {
      ok () {
        servertype.add(this.server).then(r => {
          if (r.code === 200) {
            this.$emit('on-ok', {
              refresh: true
            })
            this.isOpen = !this.isOpen
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
          } else {
            this.loading = false
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      }
    }
  }
</script>
